frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import Box from '@mui/material/Box';
3import {useTranslation} from 'react-i18next';
4import {getSession, useSession} from 'next-auth/react';
5import TravelColumns from '../../../containers/TravelColumns';
6import NewTravelDialog from '../../../containers/NewTravelDialog';
7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
8import Fab from '../../../containers/Fab';
9import pageUtils from '../../../lib/pageUtils';
10import usePermissions from '../../../hooks/usePermissions';
11import EventLayout, {TabComponent} from '../../../layouts/Event';
12import {
13 EventByUuidDocument,
14 FindUserVehiclesDocument,
15 VehicleEntity,
16 useFindUserVehiclesQuery,
17} from '../../../generated/graphql';
18
19interface Props {
20 eventUUID: string;
21 announcement?: string;
22}
23
24const Page = (props: PropsWithChildren<Props>) => {
25 return <EventLayout {...props} Tab={TravelsTab} />;
26};
27
28const TravelsTab: TabComponent<Props> = () => {
29 const {t} = useTranslation();
30 const session = useSession();
31 const {
32 userPermissions: {canAddTravel},
33 } = usePermissions();
34 const [openNewTravelDialog, setNewTravelDialog] = useState(false);
35 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
36 const [selectedVehicle, setSelectedVehicle] = useState<VehicleEntity>();
37
38 const isAuthenticated = session.status === 'authenticated';
39 const {data} = useFindUserVehiclesQuery({
40 skip: !isAuthenticated,
41 });
42 const vehicles = data?.me?.profile?.vehicles?.data || [];
43
44 const addTravelClickHandler =
45 isAuthenticated && vehicles?.length != 0
46 ? toggleVehicleChoice
47 : () => setNewTravelDialog(true);
48
49 return (
50 <Box>
51 <TravelColumns toggle={addTravelClickHandler} />
52 {canAddTravel && (
53 <Fab onClick={addTravelClickHandler} aria-label="add-car">
54 {t('travel.creation.title')}
55 </Fab>
56 )}
57 <NewTravelDialog
58 key={selectedVehicle?.id || 'noVehicle'}
59 opened={openNewTravelDialog}
60 toggle={() => setNewTravelDialog(false)}
61 selectedVehicle={selectedVehicle}
62 />
63 <VehicleChoiceDialog
64 open={openVehicleChoice}
65 toggle={toggleVehicleChoice}
66 setNewTravelDialog={setNewTravelDialog}
67 setSelectedVehicle={setSelectedVehicle}
68 vehicles={vehicles}
69 />
70 </Box>
71 );
72};
73
74export const getServerSideProps = pageUtils.getServerSideProps(
75 async (context, apolloClient) => {
76 const {uuid} = context.query;
77 const {host = ''} = context.req.headers;
78 const session = await getSession(context);
79 let event = null;
80
81 // Fetch event
82 try {
83 const {data} = await apolloClient.query({
84 query: EventByUuidDocument,
85 variables: {uuid},
86 });
87 event = data?.eventByUUID?.data;
88 } catch (error) {
89 return {
90 notFound: true,
91 };
92 }
93
94 // Fetch user vehicles
95 if (session)
96 await apolloClient.query({
97 query: FindUserVehiclesDocument,
98 });
99
100 return {
101 props: {
102 eventUUID: uuid,
103 metas: {
104 title: event?.attributes?.name || '',
105 url: `https://${host}${context.resolvedUrl}`,
106 },
107 },
108 };
109 }
110);
111
112export default Page;